<template>
    <div class="chartContentWrapper">
        <div class="chartContentTitle">
            {{ title }}
        </div>
        <div class="chartContentMain">
            <slot></slot>
        </div>
    </div>
</template>

<script setup>
    const { title } = defineProps(['title'])
</script>
 
<style lang='less' scoped>
    .chartContentWrapper{
        box-shadow: -10px 0 15px #034c6a inset,
        0 -10px 15px #034c6a inset,
        10px 0 15px #034c6a inset,
        0 10px 15px #034c6a inset;
        position: relative;
        .chartContentTitle{
            width: 14.15vw;
            height: 3.7vh;
            background: #034c6a;
            border-radius: 50px;
            text-align: center;
            line-height: 3.7vh;
            color: #fff;
            position: absolute;
            z-index: 99;
            left: 50%;
            transform: translateX(-50%);
            top: -1.85vh;
            font-size: 0.8vw;
        }
    }
</style>